<template>
	<view>
		<tt-bar leftIcon="icon-back" title="确认助力订单" titleAlign="left">			
			<template v-slot:rightCnt>
				<text class="iconfont icon-shoucangdianjia" :style="{'background-color':goodData.isDelete?'#ffffff':btnBg}" @tap="toshop"></text>
				<!-- <text class="iconfont icon-home rIcon" :style="{'background-color':goodData.isDelete?'#ffffff':btnBg}" @tap="toHome"></text> -->
			</template>			
		</tt-bar>
		<view class="constant">
			<view class="top">
				<swiper class="left" :circular="true" 
							:vertical="true" 
							:autoplay="true" 
							:interval="2000" 
							:duration="2000" >
					<swiper-item v-for="(item,index) in userlist" :key="index">
					<view class="leftImg"><image :src="item.pic" mode=""></image></view>
					<view class="leftName"><text class="wenzitishi">{{item.nickName}}&nbsp;&nbsp;&nbsp;助力成功！</text></view>
					</swiper-item>
				</swiper>
				<view class="right">
					<text class="wenzitishi">全部助力课</text>
					<text class="iconfont icon-right" @tap="myhelp"></text>
				</view>
			</view>
			<view class="helpShopping">
				<view class="tupian"><image :src="datalist.courseImg"></image></view>
				<view class="shoppingName">
					<view class="className">
						<text>{{ datalist.name }}</text>
					</view>
					<view class="jigou">
						<text>{{ datalist.storeName }}</text>
					</view>
					<view class="huodongjia">
						<text>最低￥</text>
						<text class="huodongjiaA">{{ datalist.underPrice }}</text>
					</view>
					<view class="youhuijia">
						<text>原价{{ datalist.coursePrice }}元</text>
					</view>
				</view>
			</view>
			<view class="xueyuanxinxi">
				<view class="studentxinxi">
					<text style="float: left;" class="xinxi">学员信息</text>
					<text style="float: right;" class="iconfont icon-right" @tap="memberList"></text>
				</view>
				<view class="studentxinxi studentxinxi1 studentxinxi2">
					<text class="xinxi">学员</text>
					<input class="in_btn" type="text" placeholder="请输入学员姓名" v-model="defaultMember[0].name" :disabled="disabled" />
				</view>

				<view class="studentxinxi studentxinxi1">
					<text class="xinxi">联系电话</text>
					<input class="in_btn" type="text" placeholder="请输入手机号" v-model="defaultMember[0].phone || defaultMember[0].username" :disabled="disabled" />
				</view>
				<view class="btnhelp">
					<view class="btnhelpbox" @tap="helpjincheng(datalist)">		
						<image src="../static/faqizhuli.gif" mode=""></image>
					</view>
					<view class="guanzhu">
						<image src="../static/nikebtn.png" mode=""></image>
						<text>关注店铺</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
export default {
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			parentId: state => state.user.parentId
		})
	},
	data() {
		return {
			datalist: {},
			defaultMember: [
				{
					name: '',
					username: '18712345678'
				}
			],
			memberInfo: null,
			powerInId:0,
			msg:'',
			userlist:[],
			show_name: '1',
			disabled: false,
			// show_btn: false
		};
	},
	methods: {
		toshop(){
			
		
			this.toPage(
			{
				url:'shopDetail',
				id:this.datalist.storeId
			}
			
			)
		},
		myhelp() {
			uni.navigateTo({
				url: '../myHelp/myHelp'
			});
		},
		myhelp1() {
			var helpList = JSON.stringify(this.datalist);
			uni.navigateTo({
				url: '../helpjincheng/helpjincheng?index='+ helpList
			});
		},
		memberList() {
			uni.navigateTo({
				url: '../../pagesA/memberList/memberList?select=1'
			});
		},
		getMember() {
			this.$store
				.dispatch('apiGetMemberList', {
					userId: this.userInfo.userId,
					page_no: 1,
					page_size: 10
				})
				.then(res => {
					this.memberInfo = res.data.data.items;
					if(this.memberInfo[0]){
						this.defaultMember = res.data.data.items.filter(x => {
							return x.used == 1;
						});
					}
					if (this.defaultMember.length < 1) {
						this.defaultMember = [res.data.data.items[0]];
					}
					if (this.defaultMember[0].name == null) {
						this.show_name = '';
						// this.show_btn = false;
						this.disabled = false;
					} else {
						this.show_btn = true;
						this.disabled = true;
					}
				});
		},
		//关注店铺
		guanzhu(){
			this.$store.dispatch("apiFollowShop",{
				userId:this.userInfo.userId,
				linkId:this.datalist.storeId
			}).then(res=>{
				if(res.data.code==1){
					if(this.shopData.fav==0){
						uni.showToast({
							title: '关注成功',
							icon: 'success'
						});
					}else{
						uni.showToast({
							title: '已取消关注',
							icon: 'success'
						});
					}
					this.getData();
				}
			})
			
		},
		getapiGetpowersuccess (){
			this.$store
				.dispatch('apiGetpowersuccess')
				.then(res => {
					console.log(res)
					this.userlist  = res.data.successMessage.cuser
					console.log(this.userlist)
				});
		},
		save() {
			let rgx = /^1[3456789]\d{9}$/;
			if (!this.defaultMember[0].name) {
				uni.showToast({
					title: '学员名不能为空',
					icon: 'none'
				});
			} else if (!(this.defaultMember[0].username || this.defaultMember[0].phone)) {
				uni.showToast({
					title: '手机号不能为空',
					icon: 'none'
				});
			} else if (!rgx.test(this.defaultMember[0].username || this.defaultMember[0].phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
			} else {				
				this.$store
					.dispatch('apiAddMember', {
						name: this.defaultMember[0].name,
						phone: this.defaultMember[0].username,
						userId: this.userInfo.userId,
						birthday: '2015-01-01',
						sex: 0,
						type: 1
					})
					.then(res => {
						
						uni.showToast({
							title: '添加学员成功',
							icon: 'none'
						});
						this.getMember()
						setTimeout(this.helpjincheng(),200)
					});
										
			}
		},
		helpjincheng(datalist) {
			if(!this.show_name){
				this.save()
			}else{
				this.$store
					.dispatch('apiOpenApower', {
						userId: this.userInfo.userId,
						actPowerId: this.datalist.id,
						courseId: this.datalist.courseId,
						powerNum: this.datalist.powerNum,
						type: 1,
						cuseMemberId: this.defaultMember[0].id
					})
					.then(res => {
						this.msg = res.data.msg
						
						this.$store
							.dispatch('apiOpenGetPowerInId', {
								userId: this.userInfo.userId,
								actPowerId: this.datalist.id,				
							})
							.then(res => {
								
								this.powerInId = res.data.powerInId.id
								this.getqvchuanchan(datalist);
								this.guanzhu()
								
							});	
							
						
					});
			}
			
		},
		getqvchuanchan(datalist) {
			datalist.powerInId = this.powerInId;
			var helpList = JSON.stringify(datalist);
			uni.showToast({
				title: this.msg,
				icon:  'none',
				duration: 2000,
				success: function() {
					setTimeout(function() {
						
						uni.navigateTo({
							url: '../helpjincheng/helpjincheng?index=' + helpList 
						})
												
					}, 2000);
				}
			});
		}
		
	},
	onLoad(options) {
		this.datalist = JSON.parse(options.index); // 字符串转对象
		console.log(this.datalist);
		this.getMember();
		this.getapiGetpowersuccess();
		uni.$on('selectMember', payload => {
			this.memberIndex = payload.index;
			this.defaultMember = [this.memberInfo[payload.index]];
		});
	}
};
</script>

<style lang="less">
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {
	background-color: #fed407;
}
.top {
	background-color: #fed407;
	width: 100%;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.left {
		
		width: 40%;
		height: 50rpx;
		background-image: url(../static/btn-1.png);
		background-size: 100% 100%;
		margin-left: 20rpx;
		padding-left: 7rpx;
		display: flex;
		justify-content: start;
		align-items: center;
		swiper-item{
			// width: 40%;
			// height: 50rpx;
			// background-image: url(../static/btn-1.png);
			// background-size: 100% 100%;
			// margin-left: 20rpx;
			// padding-left: 7rpx;
			display: flex;
			justify-content: start;
			align-items: center;
			.leftImg {
				border-radius: 50%;
				background-color: red;
				width: 43rpx;
				height: 43rpx;
				overflow: hidden;
				margin-right: 15rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.leftName {
				color: #fff;
				font-size: 24rpx;
				line-height: 50rpx;
			}
		}
		
		
	}
	.right {
		width: 30%;
		height: 50rpx;
		background-image: url(../static/btn-2.png);
		background-size: 100% 100%;
		color: #fff;
		text-align: center;
		margin-right: 20rpx;

		.wenzitishi {
			font-size: 24rpx;
			line-height: 50rpx;
		}
		.icon-right {
			font-size: 24rpx;
			padding-left: 14rpx;
			line-height: 50rpx;
		}
	}
}

.helpShopping {
	width: 90%;
	height: 300rpx;
	background-color: #fff;
	border-radius: 25rpx;
	margin: 38rpx;
	padding: 30rpx;
	display: flex;
	overflow: hidden;
	align-items: center;

	.tupian {
		width: 250rpx !important;
		height: 250rpx !important;
		image {
			width: 100%;
			height: 100%;
		    border-radius: 10rpx;
		}
	}
	.shoppingName {
		flex: 2;
		height: 100%;
		padding-left: 15rpx;
		display: flex;
		flex-direction: column;
		.className {
			font-weight: 700;
			font-size: 30rpx;
			margin-bottom: 10rpx;
			height: 35rpx;
			overflow: hidden;
		}
		.huodongjia {
			color: red;
			font-weight: 700;
			font-size: 26rpx;
			.huodongjiaA {
				font-size: 38rpx;
			}
		}
		.jigou {
			color: #999;
			font-size: 24rpx;
			margin-bottom: 50rpx;
		}
		.youhuijia {
			text-decoration: line-through;
			font-size: 24rpx;
		}
	}
}
.xueyuanxinxi {
	width: 90%;
	height: 600rpx;
	background-color: #fff;
	border-radius: 25rpx;
	margin: 38rpx;
	display: flex;
	flex-direction: column;
	padding: 0 40rpx 0 40rpx;
	font-size: 32rpx;
	color: #202932;
	.studentxinxi {
		height: 100rpx;
		line-height: 100rpx;
		// border-bottom: 1px solid #ccc;

		.iconfont {
			color: #c9c9c9;
			font-size: 40upx;
			font-weight: normal;
		}
		.xinxi {
			font-weight: bold;
		}
		.in_btn {
			height: 100%;
			line-height: 100rpx;
			text-align: start;
		}
	}

	.studentxinxi1 {
		display: flex;
		justify-content: space-between;
	}
	.studentxinxi2 {
		border-bottom: 2px solid #f6f6f6;
	}

	.btnhelp {
		width: 100%;
		margin-top: 30rpx;
		.btnhelpbox {
			height: 100rpx;
			width: 100%;
			background-image: url(../static/helpbtnbig.png);
			background-size: 100% 100%;
			margin: 20rpx 0;
			text-align: center;
			image{
				width: 100%;
				height: 100%;
			}
			// text {
			// 	color: red;
			// 	text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
			// 	font-size: 35rpx;
			// 	line-height: 85rpx;
			// 	letter-spacing: 10rpx;
			// 	font-weight: 700;
			// }
		}
		.guanzhu {
			display: flex;
			justify-content: center;
			vertical-align: middle;
			image {
				width: 26rpx;
				height: 26rpx;
			}
			text {
				color: #999;
				font-size: 26rpx;
				line-height: 26rpx;
				margin-left: 10rpx;
			}
		}
	}
}
.icon-shoucangdianjia {
		font-size: 44upx;
		font-weight: normal;
		width: 70upx;
		height: 70upx;
		text-align: center;
		line-height: 70upx;
		border-radius: 50%;
	}
</style>
